<template>
    <!-- <h3>工作生活</h3> -->
    <div class="work-life">

        <!-- 01  分类列表 -->
        <nav class="container">
        </nav>

        <!-- 02 图文列表 -->
        <div class="container">
            <div class="row">
                <div class="col-md-2">
                    <ul class="aside-left">
                        <li v-for="(item, index) in cateArray" :key="item.id" @click="tabFn(index)"
                            :class="num == index ? 'active' : ''">
                            {{ item.cate_name }}
                        </li>
                    </ul>
                </div>
                <div class="col-md-10">
                    <ListItem :arr="articles" />
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import ListItem from '@/components/ListItem.vue'
import { useCateStore } from '@/stores/cate'
import { ref, watch } from 'vue'
import { articleList, host } from '@/api/index'

const cateStore = useCateStore()

// 获取文章列表
interface IItem {
    [key: string | number]: string | any
}
const pageNum = ref<number>(1)//页码
const pageSize = ref<number>(15)//数量
const articles = ref<Array<IItem>>([]);// 数组
const cate_name = ref<string | undefined>("")
const articleListFn = async () => {
    await articleList({ page_size: pageSize.value, page_num: pageNum.value, cate_name: cate_name.value })
        .then(
            (resData: any) => {
                // console.log(resData)
                articles.value = [];
                if (resData.code == 200) {
                    let { data } = resData;
                    let arr = data.map((item: IItem) => {
                        const date = new Date(item.createAt)
                        item.createAt = date.toLocaleDateString() + " " + (date.toLocaleTimeString())
                        item.src = host + item.src;
                        return item;
                    })
                    console.log(arr);
                    articles.value = arr;
                }
            }
        )
}

// 左侧栏切换
const num = ref<number>(0)
const tabFn = (value: number) => {
    num.value = value
    cate_name.value = cateArray.value[value]?.cate_name
}

interface ICate {
    id: number
    cate: string
    cate_name: string
    cate_url?: string
}

// 获取左侧栏分类名称
const cateArray = ref<ICate[]>([])
cateStore.cateListFn()
    .then(
        () => {
            // console.log(cateStore.cates)
            let arr = cateStore.cates.filter(item => {
                return item.cate == "工作生活"
            })
            cateArray.value = arr;
            if (arr.length != 0) {
                cate_name.value = arr[0]?.cate_name;
            }
        }
    )

watch(cate_name, () => {
    console.log("数据变化了。。。")
    articleListFn()
})

</script>

<style lang="less">
@import "../assets/varable.less";

.work-life {
    nav {
        button {
            margin: 0px 10px 10px;
        }
    }

    .row {
        ul.aside-left {
            padding: 0;
            margin: 0;
            list-style: none;

            li {
                width: 100%;
                padding: 10px 10px;
                border-bottom: 1px solid #f0f0f0;
                text-align: center;
                margin-bottom: 10px;
                cursor: pointer;
            }

            .active {
                background-color: @active-color;
                color: #fff;
            }
        }
    }
}

@media (max-width:768px) {
    .work-life {
        .row {
            ul.aside-left {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                li {
                    width: auto;
                    height: auto;
                    padding: 10px 10px;
                    margin: 5px;
                }
            }
        }
    }
}
</style>